@extends('layout.index')
@section('content')
    <style>
        body {
            background-color: $ffffff;
        }
    </style>  
<link rel="stylesheet" href="{{asset('admin/lib/jq-module/zyupload/zyupload-1.0.0.min.css')}}" media="all">
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">幻灯片标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="标题不能为空" placeholder="请输入标题" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">幻灯片跳转地址</label>
        <div class="layui-input-block">
            <input type="text" name="url" lay-verify="required" lay-reqtext="跳转地址不能为空" placeholder="请输入跳转地址" value="" class="layui-input">
            <tip>幻灯片跳转的地址</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">幻灯片排序</label>
        <div class="layui-input-block">
            <input type="text" name="swiper_sort" lay-verify="required" lay-reqtext="排序" placeholder="请输入1-100" value="" class="layui-input">
            <tip>根据输入大小排列播放顺序</tip>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label required">幻灯片图片</label>
        <div class="layui-input-inline">
            <div id="zyupload" class="zyupload"></div>
        </div>
    </div>
  
    


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>

<script src="{{asset('admin/lib/jq-module/zyupload/zyupload-1.0.0.min.js')}}" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
        // 初始化插件
        $("#zyupload").zyUpload({
            width: "600px",                 // 宽度
            height: "200px",                 // 宽度
            itemWidth: "140px",                 // 文件项的宽度
            itemHeight: "115px",                 // 文件项的高度
            url: "/admin/swiper/upload",  // 上传文件的路径
            fileType: ["jpg", "png", "jpeg"],// 上传文件的类型
            fileSize: 51200000,                // 上传文件的大小
            multiple: true,                    // 是否可以多个文件上传
            dragDrop: true,                    // 是否可以拖动上传文件
            tailor: true,                    // 是否可以裁剪图片
            del: true,                    // 是否可以删除文件
            finishDel: false,  				  // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */

            onSuccess: function (file, response) {          // 文件上传成功的回调方法
                res = JSON.parse(response); 
                if (res.status == 'seccess') {
                    $("#uploadInf").append("<p>上传成功</p>");
                    $("#uploadInf").append('<input type="hidden" name="img_url" value='+res.url+'>');
                }
                
            }
        });

    });
</script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {

            //     // 关闭弹出层
            //     layer.close(index);

            //     var iframeIndex = parent.layer.getFrameIndex(window.name);
            //     parent.layer.close(iframeIndex);

            // });
            $.ajaxSetup({
                headers:{'X-CSRF-TOKEN': '{{csrf_token()}}'}
            });
            $.post('/admin/swiper', data.field, function(res){
                if (res.status=='success') {
                    location.href='/admin/swiper'
                }
            });

            return false;
        });

    });
</script>
</body>
@endsection